<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>字帖生成器</title>
	<link rel="stylesheet" href="fonts.css" type="text/css" />
	<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body onload="onload()">
	<div style="width: 1445px; margin: 0 auto;" class=".centered ">
		<div class="right">
			<form>
				<div>
					<lable>背景格样式：</lable><br />
					<input type="radio" name="bgGrid" value="0" checked="" onchange="preview()" />
					<img src="svg/bg02.svg" alt="米回格" title="米回格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="1" onchange="preview()" />
					<img src="svg/bg12.svg" alt="田字格" title="田字格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="2" onchange="preview()" />
					<img src="svg/bg22.svg" title="米字格" alt="米字格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="3" onchange="preview()" />
					<img src="svg/bg32.svg" title="米回格2" alt="米回格2" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="4" onchange="preview()" />
					<img src="svg/bg42.svg" title="回宫格" alt="回宫格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="5" onchange="preview()" />
					<img src="svg/bg52.svg" title="蛋格" alt="蛋格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="6" onchange="preview()" />
					<img src="svg/bg62.svg" title="九宫格" alt="九宫格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGrid" value="7" onchange="preview()" />
					<img src="svg/bg72.svg" title="方格" alt="方格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<!-- <input type="radio" name="bgGrid" value="8" onchange="preview()" />
					<img src="svg/bg82.svg" title="蛋田格" alt="蛋田格" width="35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
					<!-- <input type="radio" name="bgGrid" value="91" />无背景格 -->
				</div>
				<div>
					<lable>背景格颜色：</lable><br />
					<input type="radio" name="bgGridColor" value="1" checked="" onchange="preview()" />
					<span style="color:green">绿色</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGridColor" value="2" onchange="preview()" />
					<span style="color:black">黑色</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bgGridColor" value="3" onchange="preview()" />
					<span style="color:red">红色</span>
				</div>
				<div>
					<lable>描字类型：</lable><br />
					<input id="ct1" type="radio" name="charType" value="9333333333333" onchange="preview()" />
					<span>全描</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input id="ct2" type="radio" name="charType" value="9333333" onchange="preview()" />
					<span>半描</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="charType" value="9" checked="" onchange="preview()" /><span>不描</span>
				</div>
				<div>
					<lable>描字颜色深浅：</lable><br />
					<!-- 数字代表颜色深浅，9最深，1最浅 -->
					<input id="shade" type="number" value="3" size="2" min="1" max="9" style="width: 80px;"
						onchange="colorShade()" />
				</div>
				<div>
					<lable>文字颜色：</lable><br />
					<input type="radio" name="fontc" value="1" onchange="preview()" />
					<span style="color:green">绿色</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="fontc" value="2" onchange="preview()" />
					<span style="color:black">黑色</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="fontc" value="3" checked="" onchange="preview()" />
					<span style="color:red">红色</span>
				</div>
				<div>
					<lable for="fonts-select">字体：</lable>
					<select id="fonts-select" onchange="preview()" title="字体">
					</select>
				</div>
				<div>
					<label for="words">输入字帖文字：</label>
					<input id="words" type="text" autocomplete="off" placeholder="输入要创建字帖的汉字" onchange="preview()"
						required />
				</div>
				<div>
					<label for="rows">每字行数：</label>
					<input id="rows" type="number" value="1" onchange="preview()" size="2" min="1" max="20"
						style="width: 80px;" oninput="if(value<1)value=1;if(value>20)value=20" />
					<input type="button" value="每字一页" onclick="document.getElementById('rows').value=20;preview()"
						style="width: auto;" />
				</div>
				<div>
					<lable for="cc">常用汉字：</lable>
					<select id="cc" multiple="multiple" style="height: 300px;" title="常用汉字"
						onchange="commonCharSelected();preview()">
					</select>
				</div>
				<div>
					<button type="button" onclick="print()">打印字帖</button>
				</div>
			</form>
		</div>
		<div class="left">
			<div style="width: 1040px;text-align: center;">
				<ul id="list">
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="index.js"></script>

</html>